<template>

  <!-- {{ value }} -->
  <el-cascader
    :value="value"
    :props="dsProps"
    :options="options"
    @change="handleChange"
  />

</template>

<script>

import { getDepartment } from '@/api/department'
import { arr2tree } from '@/utils/index'
export default {
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      dsProps: {
        value: 'id',
        label: 'name'
      },
      //   value: [],
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }]
        }
      ]
    }
  },
  created() {
    this.loadDepartment()
  },
  methods: {
    async loadDepartment() {
      const res = await getDepartment()
      //   console.log(res)
      this.options = arr2tree(res.data, 0)
    },
    handleChange(value) {
      // console.log(value)
      const id = value[value.length - 1]
      this.$emit('input', id)
    }
  }
}
</script>

<style>

</style>
